<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<link rel="stylesheet" href="font/style.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 400px;
				height: 40px;
				margin: 100px auto;
				border: 1px solid;
				overflow: hidden;
			}

			.box>div {
				width: 800px;
				height: 100%;
				background-image: repeating-linear-gradient(45deg, #000 0px, #000 10px, #fff 10px, #fff 20px);
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div></div>
		</div>

		<script type="text/javascript">
			const bar = document.querySelector(".box>div");
			let counts = 0;
			setInterval(() => {
				counts++;
				if (counts == 400) {
					counts = 0;
				}
				bar.style.marginLeft = `-${counts}px`;
			}, 1000 / 64);
		</script>
	</body>

</html>
